<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>农资商城销售系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/admin/css/layui.css}">
    <link rel="stylesheet" th:href="@{/admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/admin/js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/admin/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/global.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/layui.js}"></script>
    <script type="text/javascript" th:src="@{/admin/js/xadmin.js}"></script>
</head>
<body>
<input type="hidden" name="goodsid" id="goodsid">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table id="test" class="layui-hide" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 表头 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn" lay-event="add"><i class="layui-icon"></i>添加
        </button>
    </div>
</script>

<!-- 行内 -->
<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="update"><i class="layui-icon">&#xe642;</i>修改</a>
        <a class="layui-btn layui-btn-xs layui-icon" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

</body>
<script>

    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        //倒计时两秒执行initData
        setTimeout(initData, 500);

      function initData(){
          //初始化表格数据
          table.render({
              elem: '#test',
              url: prefix + '/goodsimg/selectAll',
              toolbar: '#toolbarDemo',
              method: "get",
              where: {
                  goodsid: $("#goodsid").val()
              },
              defaultToolbar: ['filter', 'print', 'exports'],
              title: '图片列表',
              page: true,
              id: 'liebiao',
              parseData: function (res) {
                  return {
                      "code": 0,
                      "msg": res.msg,
                      "count": res.data.count,
                      "data": res.data.data
                  }
              },
              cols: [
                  [
                      {
                          field: 'id',
                          title: 'ID',
                          sort: true,
                          align: 'center',
                          hide: true
                      },{
                      field: 'img',
                      title: '商品图',
                      align: 'center',
                      templet: function (d) {
                          return '<img src="'+d.img+'" width="100px" height="100px" alt="">';
                      }
                  }, {
                      field: 'sketch',
                      title: '描述',
                      align: 'center',
                  },  {
                      field: 'index',
                      title: '排序',
                      align: 'center',
                      sort: true
                  }, {
                      fixed: 'right',
                      title: '操作',
                      toolbar: '#barDemo',
                      width: 200,
                      align: 'center'
                  }
                  ]
              ],
              done: function (res, curr, count) {
                  // 如果有使用到下拉筛选，这句话必须要
                  hoverOpenImg();//显示大图
                  $('table tr').on('click', function () {
                      $('table tr').css('background', '');
                      $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                  });
              }
          });

      }
        function hoverOpenImg() {
            var img_show = null; // tips提示
            $('td img').hover(function () {
                var kd = $(this).width();
                kd1 = kd * 4;          //图片放大倍数
                kd2 = kd * 4 + 30;       //图片放大倍数
                var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' />";
                img_show = layer.tips(img, this, {
                    tips: [2, 'rgba(41,41,41,.5)']
                    , area: [kd2 + 'px']
                });
            }, function () {
                layer.close(img_show);
            });
            $('td img').attr('style', 'max-width:70px;display:block!important');
        };

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '您正在添加商品图片信息',
                        type: 2,
                        shade: 0.3,
                        shadeClose: true,
                        skin: 'layui-layer-molv',
                        anim: 5,
                        btnAlign: 'c',
                        closeBtn: 1,
                        area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                        content: prefix + '/addGoodsImg?goodsid=' + $('#goodsid').val(),
                        end: function () {
                            table.reload('liebiao');
                        }
                    });
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('真的删除吗', function (index) {
                    $.post(prefix + '/goodsimg/delete', {id: data.id}, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 2000
                            }, function () {
                                table.reload('liebiao');
                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 5,
                                time: 2000
                            });
                        }
                    })
                });
            } else if (obj.event === 'update') {
                layer.open({
                    title: '您正在修改商品图片信息',
                    type: 2,
                    shade: 0.3,
                    shadeClose: true,
                    skin: 'layui-layer-molv',
                    anim: 5,
                    btnAlign: 'c',
                    closeBtn: 1,
                    area: [($(window).width() - 50) + "px", ($(window).height() - 50) + "px"],
                    content: prefix + '/updateGoodsImg',
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("#id").val(obj.data.id);
                        body.find("#sketch").val(obj.data.sketch);
                        body.find("#index").val(obj.data.index);
                        body.find("#imges").attr("src",obj.data.img);
                        body.find("#img").val(obj.data.img);
                    },
                    end: function () {
                        table.reload('liebiao');
                    }
                });
            }
        });


    });



</script>
</html>